<template>
  <div class="min-h-dvh min-w-[320px] text-gray-800">
    <!-- Info -->
    <div class="container mx-auto max-w-screen-lg p-4 lg:p-8">
      <div class="grid grid-cols-1 md:mt-12 md:grid-cols-6">
        <!-- Personal -->
        <div class="p-5 text-left md:col-span-2 md:text-right">
          <img
            class="inline-block md:w-2/3"
            src="assets/images/avatar3.png"
            alt="我的肖像"
          />
          <div class="mt-5 space-y-2">
            <div class="flex items-center justify-end">
              <Icon
                name="material-symbols:location-on"
                size="20"
                class="mr-1"
              />
              中国 浙江·杭州
            </div>
            <div class="flex items-center justify-end">
              <Icon name="mdi:cellphone-iphone" size="20" class="mr-1" />
              +86 15893985818
            </div>
            <div class="flex items-center justify-end">
              <Icon name="ic:round-wechat" size="20" class="mr-1" /> ssy_hktk
            </div>
            <div class="flex items-center justify-end">
              <a
                href="mailto:744929434@qq.com"
                target="_blank"
                class="font-medium text-black underline hover:text-black/75"
              >
                <Icon name="mdi:email-fast" size="20" class="mr-1" />
                song_kr@foxmail.com
              </a>
            </div>
            <div class="flex items-center justify-end">
              <Icon
                name="material-symbols:home-rounded"
                size="20"
                class="mr-1"
              />
              <a
                class="font-medium text-black underline hover:text-black/75"
                href="https://valley of wind.com"
                target="_blank"
                >https://songsy.site</a
              >
            </div>
          </div>
        </div>
        <!-- END Personal -->

        <!-- Intro -->
        <div class="p-5 md:col-span-4">
          <h1 class="text-xl font-semibold">Web前端工程师</h1>
          <h2 class="text-5xl font-bold leading-tight">宋顺义</h2>
          <div class="my-5 h-1 rounded bg-blue-500"></div>
          <div class="text-lg leading-relaxed text-slate-600">
            1、4年多端开发经验（业务管理后台、数据驾驶舱、小程序、h5）。<br />
            2、熟练掌握 HTML、CSS、JS、TS，ES6语法等。<br />
            3、精通vue2、3、react18 主流js框架、element ui、element
            Plus，antd，vant 等 ui框架、Echarts、antV
            、three.js等数据可视化技术、gsap动画库、 uni-app
            跨端小程序，原生小程序开发。<br />
            4、熟练掌握 npm，yarn、pnpm 包管理工具、 git、SVN
            的使用，linux、nginx服务器使用。<br />
            5、有独立完成AI对话大模型对接的经验。
          </div>
        </div>
        <!-- END Intro -->
      </div>
    </div>
    <!-- END Info -->

    <!-- Bio -->
    <div class="container mx-auto max-w-screen-lg space-y-10 p-4 lg:p-8">
      <!-- Skills -->
      <div class="grid grid-cols-1 md:grid-cols-6">
        <div class="px-5 py-2 text-left md:col-span-2 md:text-right">
          <h3 class="text-lg font-bold uppercase">专业技能</h3>
        </div>
        <div class="space-y-6 px-5 py-2 md:col-span-4">
          <div>
            <div class="leading-relaxed">
              <div class="mb-4">
                <span class="font-semibold !text-blue-500"
                  >HTML、CSS 和 JavaScript：</span
                >
                <span
                  >精通前端三大基础技术，能够编写语义化的 HTML、响应式的 CSS
                  和高效的
                  JavaScript，确保网站在各种设备和浏览器上表现出色。</span
                >
              </div>
              <div class="mb-4">
                <span class="font-semibold !text-blue-500">Vue 和 Nuxt：</span>
                <span
                  >在使用 Vue 和 Nuxt
                  构建单页应用（SPA）和服务端渲染（SSR）应用方面具有丰富经验，能够快速开发出性能优异、体验流畅的现代
                  Web 应用。</span
                >
              </div>
              <div class="mb-4">
                <span class="font-semibold !text-blue-500"
                  >Uniapp和小程序开发：</span
                >
                <span>
                  擅长使用 uniapp
                  开发跨平台应用，同时熟悉微信小程序开发，从界面设计到功能实现，能够快速迭代并发布高质量的应用。</span
                >
              </div>
              <div class="mb-4">
                <span class="font-semibold !text-blue-500">数据可视化：</span>
                <span>
                  深入理解数据可视化，熟悉 ECharts、HighCharts、AntV
                  等图表库，能够在移动端实现复杂的数据交互展示，提供直观的分析和报告。</span
                >
              </div>

              <div class="mb-4">
                <span class="font-semibold !text-blue-500">Node.js：</span>
                <span>
                  熟练掌握 Node.js，express,koa2 等框架，用于开发高性能的后端服务和
                  API，支持前端应用的数据需求，并确保系统的稳定性和可扩展性。</span
                >
              </div>
              <div class="mb-4">
                <span class="font-semibold !text-blue-500">大模型对接与部署：</span
                ><span
                  >可以独立完成大模型api对接，构建AI对话应用，钉钉接入AI机器人等。
                  <a href="https://songsy.site/deepseek/" target="_blank">沧浪智云——基于deepSeek-V3</a>
                  </span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- END Skills -->
      <!-- Projects -->
      <div class="grid grid-cols-1 md:grid-cols-6">
        <div class="px-5 py-2 text-left md:col-span-2 md:text-right">
          <h3 class="text-lg font-bold uppercase">项目</h3>
        </div>
        <div class="space-y-6 px-5 py-2 md:col-span-4">
          <div>
            <h4
              class="mb-2 text-lg font-semibold !text-blue-500 flex items-center justify-between"
            >
              <span>{{ $t("projects.meko.title") }}</span>
              <img src="assets/logos/meko.ai.png" alt="" class="h-[16px]" />
            </h4>
            <h5 class="mb-1 font-bold">
              项目地址 -
              <a
                class="font-medium text-black underline hover:text-black/75"
                href="https://meko.ai"
                target="_blank"
                >https://meko.ai</a
              >
            </h5>
            <div class="leading-relaxed">
              {{ $t("projects.meko.description") }}
            </div>
          </div>
          <div>
            <h4
              class="mb-2 text-lg font-semibold !text-blue-500 flex items-center justify-between"
            >
              <span>{{ $t("projects.wyocrm.title") }}</span>
              <img src="assets/logos/wyocrm.png" alt="" class="h-[16px]" />
            </h4>
            <h5 class="mb-1 font-bold">
              项目地址 -
              <a
                class="font-medium text-black underline hover:text-black/75"
                href="https://wyocrm.com/"
                target="_blank"
                >https://wyocrm.com/</a
              >
            </h5>
            <div class="leading-relaxed">
              {{ $t("projects.wyocrm.description") }}
            </div>
          </div>
          <div>
            <h4
              class="mb-2 text-lg font-semibold !text-blue-500 flex items-center justify-between"
            >
              <span>{{ $t("projects.muniubox.title") }}</span>
              <img src="assets/logos/muniubox.png" alt="" class="h-[28px]" />
            </h4>
            <h5 class="mb-1 font-bold">
              项目地址 -
              <a
                class="font-medium text-black underline hover:text-black/75"
                href="https://www.muniubox.com/"
                target="_blank"
                >https://www.muniubox.com/</a
              >
            </h5>
            <div class="leading-relaxed">
              {{ $t("projects.muniubox.description") }}
            </div>
          </div>
          <div>
            <h4
              class="mb-2 text-lg font-semibold !text-blue-500 flex items-center justify-between"
            >
              <span>{{ $t("projects.smartops.title") }}</span>
              <img src="assets/logos/smartops.png" alt="" class="h-[28px]" />
            </h4>
            <h5 class="mb-1 font-bold">
              项目地址 -
              <a
                class="font-medium text-black underline hover:text-black/75"
                href="https://www.anchnet.com/platformTools/smartOps"
                target="_blank"
                >https://www.anchnet.com/platformTools/smartOps</a
              >
            </h5>
            <div class="leading-relaxed">
              {{ $t("projects.smartops.description") }}
            </div>
          </div>
        </div>
      </div>
      <!-- END Projects -->

      <!-- Work Experience -->
      <div class="grid grid-cols-1 md:grid-cols-6">
        <div class="px-5 py-2 text-left md:col-span-2 md:text-right">
          <h3 class="text-lg font-bold uppercase">工作经历</h3>
        </div>
        <div class="space-y-6 px-5 py-2 md:col-span-4">
          <div>
            <h4 class="mb-2 text-lg font-semibold !text-blue-500">
              2024.10 - 至今
            </h4>
            <h5 class="mb-1 font-bold">国研软件</h5>
          </div>
          <div>
            <h4 class="mb-2 text-lg font-semibold !text-blue-500">
              2023.9 - 2024.9
            </h4>
            <h5 class="mb-1 font-bold">浙江臻善</h5>
          </div>
          <div>
            <h4 class="mb-2 text-lg font-semibold !text-blue-500">
              2021.7 - 2023.8
            </h4>
            <h5 class="mb-1 font-bold">国研软件浙江分公司</h5>
          </div>
        </div>
      </div>
      <!-- END Work Experience -->

      <!-- Education -->
      <div class="grid grid-cols-1 md:grid-cols-6">
        <div class="px-5 py-2 text-left md:col-span-2 md:text-right">
          <h3 class="text-lg font-bold uppercase">教育</h3>
        </div>
        <div class="space-y-6 px-5 py-2 md:col-span-4">
          <div>
            <h4 class="mb-2 text-lg font-semibold !text-blue-500">2019-2021</h4>
            <h5 class="mb-1 font-bold">商丘工学院 本科(全日制)</h5>
          </div>
          <div>
            <h4 class="mb-2 text-lg font-semibold !text-blue-500">2016-2019</h4>
            <h5 class="mb-1 font-bold">新乡学院 专科(全日制)</h5>
          </div>
        </div>
      </div>
      <!-- END Education -->
    </div>
    <!-- END Bio -->
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.leading-relaxed {
  line-height: 1.6;
}
</style>
